// import React from 'react';
// import {View, Text} from 'react-native';

// const Main = () => {
//   return (
//     <View>
//       <Text>Main</Text>
//     </View>
//   );
// };
// export default Main;
import React, {useCallback, useState} from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableNativeFeedback,
  Button,
  ScrollView,
} from 'react-native';
import {useDispatch} from 'react-redux';
import {useNavigation} from '@react-navigation/native';
// import Constants from 'expo-constants';
// console.log(Constants.statusBarHeight);
import {useTranslation} from 'react-i18next';
import AccountTop from '../../component/account/AccountTop';
import UserAccount from '../../component/account/UserAccount';
import SignIn from '../../component/account/SignIn';
import UserOrder from '../../component/account/UserOrder';
import Favorites from '../../component/account/Favorites';
import HelpCenter from '../../component/account/HelpCenter';
import LotteryPopup from '../../component/account/lottery/LotteryPopup';
import Silder from '../../component/base/slider';

const randomHexColor = () => {
  return '#000000'.replace(/0/g, () => {
    // eslint-disable-next-line no-bitwise
    return (~~(Math.random() * 16)).toString(16);
  });
};
const App = props => {
  const {t} = useTranslation();
  const [top, setTop] = useState(0);
  const [showLottery, setShowLottery] = useState(false);
  const navigation = useNavigation();
  const [rippleColor, setRippleColor] = useState(randomHexColor());
  const [rippleOverflow, setRippleOverflow] = useState(false);
  const onScroll = useCallback(e => {
    if (e.nativeEvent.contentOffset.y <= 100) {
      setTop(e.nativeEvent.contentOffset.y);
    } else {
      setTop(100);
    }
  }, []);
  return (
    <View style={styles.container}>
      {showLottery ? (
        <LotteryPopup onClose={() => setShowLottery(false)} />
      ) : null}
      <AccountTop top={top} />
      {/* <Button onPress={goLogin} title="登录" />
      <Button onPress={goProduct} title="product" />
      <Button onPress={onChangeLang} title={t('setting')} /> */}
      <ScrollView onScroll={onScroll}>
        <UserAccount />
        <SignIn onOpen={() => setShowLottery(true)} />
        <UserOrder />
        <Favorites />
        <HelpCenter />
        <Silder />
        <TouchableNativeFeedback
          onPress={() => {
            setRippleColor(randomHexColor());
            setRippleOverflow(!rippleOverflow);
          }}
          background={TouchableNativeFeedback.Ripple(
            rippleColor,
            rippleOverflow,
          )}>
          <View style={styles.touchable}>
            <Text style={styles.text}>TouchableNativeFeedback</Text>
          </View>
        </TouchableNativeFeedback>
        <TouchableNativeFeedback
          onPress={() => {
            setRippleColor(randomHexColor());
            setRippleOverflow(!rippleOverflow);
          }}
          background={TouchableNativeFeedback.Ripple(
            rippleColor,
            rippleOverflow,
          )}>
          <View style={styles.touchable}>
            <Text style={styles.text}>TouchableNativeFeedback</Text>
          </View>
        </TouchableNativeFeedback>
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'relative',
    // justifyContent: 'center',
    // backgroundColor: '#ecf0f1',
  },
  touchable: {
    flex: 0.5,
    borderColor: 'black',
    height: 300,
    borderWidth: 1,
  },
  text: {alignSelf: 'center'},
});

export default App;
